<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ArcGIS Maps SDK for JavaScript</title>
    <!-- link一下arcgis中的css,导包 -->
     <!-- Load Calcite components from CDN -->
    <script type="module" src="https://js.arcgis.com/calcite-components/3.0.3/calcite.esm.js"></script>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <link rel="stylesheet" href="https://js.arcgis.com/4.32/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.32/"></script>

    <!-- Load Map components from CDN-->
    <script
        type="module"
        src="https://js.arcgis.com/map-components/4.32/arcgis-map-components.esm.js"
    ></script>

    <style>
        html,
        body,
        arcgis-map {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
        }
    </style>
</head>
<body>
    <div class="页眉">
        <!-- 使用calcite创建布局 -->
        <calcite-shell>
            <calcite-navigation slot="header">
                <calcite-navigation-logo slot="logo" target="_blank"></calcite-navigation-logo>
            </calcite-navigation>
      
            <!-- 添加 arcgis-map 组件 -->
            <arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca">
                <!-- 添加图例 -->
                <arcgis-legend position="bottom-right"></arcgis-legend>
            </arcgis-map>
        </calcite-shell>
        <calcite-loader></calcite-loader>
    </div>
    <!-- viewDiv：地图区域 -->
    <div id="viewDiv"></div>
    <div class="底图库区域"></div>

    <script>
        // document.querySelector("arcgis-map").addEventListener("arcgisViewReadyChange", (event) => {
        //     const { portalItem } = event.target.map;
        //     const navigationLogo = document.querySelector("calcite-navigation-logo");
        //     navigationLogo.heading = portalItem.title;
        //     navigationLogo.description = portalItem.snippet;
        //     navigationLogo.thumbnail = portalItem.thumbnailUrl;
        //     navigationLogo.href = portalItem.itemPageUrl;
        //     navigationLogo.label = "Thumbnail of map";
  
        //     // turn off the loader once the view is ready
        //   document.querySelector("calcite-loader").hidden = true;
        // });


        // 添加要素图层中的点
        require(["esri/layers/FeatureLayer"], (FeatureLayer) => {
            const arcgisMap = document.querySelector("arcgis-map");
            arcgisMap.addEventListener("arcgisViewReadyChange", () => {

            // Trailheads feature layer (points)
            const trailheadsLayer = new FeatureLayer({
                url: "https://www.geosceneonline.cn/server/rest/services/Hosted/pyq的查看图层/FeatureServer"
            });
            arcgisMap.map.add(trailheadsLayer);
        });
    });

        // require 是 JavaScript 中用于模块加载的关键字，允许动态地引入和使用其他模块或库中的功能。
        require(["esri/Map", "esri/views/MapView", "esri/widgets/ScaleBar"], function(Map, MapView, ScaleBar) {
            const arcgisMap = document.querySelector("arcgis-map");
            // 创建底图
            let map = new Map({
                basemap: "streets"
            });
    
            // 创建地图视图
            let view = new MapView({
                container: "viewDiv",
                map: map,
                center: [118.805, 34.027],
                zoom: 13
            });
        
            // 创建比例尺实例
            let scalebar = new ScaleBar({
                view: view,
                style: "ruler",
                unit: "metric",
                position: "bottom-left"
            });
        
            // 将比例尺添加到地图视图
            arcgisMap.map.add(scalebar, "bottom-left");
        });
    </script>
</body>
</html>